//CSS书写顺序
//1、位置属性(position, top, right, z-index, display, float等)
//2、大小(width, height, padding, margin)
//3、文字系列(font, line-height, letter-spacing, color- text-align等)
//4、背景(background, border等)
//5、其他(animation, transition等)


//重置样式
.reset(){
  *{margin:0; padding:0;}
  ul,ol{list-style:none;}
  img{border:none;}
  input,select,textarea{outline:none; border:none; background:none;}
  button{outline: none;}
  textarea{resize:none;}
  a{text-decoration:none;}
  i{
        font-style: normal;
  }
  select {
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    background: url("../../assets/images/select.png") no-repeat 98% center transparent;
    padding-right: 14px;
  }
}

//字体
@font-face {
  font-family: 'iconfont';
  src: url('../font/iconfont.eot');
  src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
  url('../font/iconfont.woff') format('woff'),
  url('../font/iconfont.ttf') format('truetype'),
  url('../font/iconfont.svg#iconfont') format('svg');
}

.iconfont {
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
 }

//位置属性
//定位
.rel(@rel:relative){
  position: @rel;
}
.abs(@abs:absolute){
  position: @abs;
}
.fix(@fix:fixed){
  position: @fix;
}
//居中
.pos-box-cc(@w, @h, @pos:absolute){
  width: @w;
  height: @h;
  position: @pos;
  left: 50%;
  top: 50%;
  margin-left: -@w / 2;
  margin-top: -@h / 2;
}
//浮动
.fl(@f:left;){
    float: @f;
    display: inline;
}
.fr(@f:right){
  float: @f;
  display: inline;
}
//层级
.z-i(@z){
    z-index: @z;
}
//display
.db(){
  display: block;
}
.di(){
  display: inline;
}
.dib(){
  display: inline-block;
}
.dib7(){
  display: inline-block;
  *display: inline;
  *zoom:1;
}
.dt(){
  display:table;
}
.dn(){
  display: none;
}
//上右下左
.l(@l){
    left: @l;
}
.r(@r){
    right: @r;
}
.t(@t){
    top: @t;
}
.b(@b){
    bottom: @b;
}

//2、大小属性
.w(@width) {
    width: @width;
}

.h(@height) {
    height: @height;
}
.lh(@height){
    line-height: @height;
}
.min_h(@height){
  min-height: @height;
}
.h_lh(@h) {
    height: @h;
    line-height: @h;
}
.maw(@w){
    max-width: @w;
}
.mah(@h){
    max-height: @h;
}
.miw(@w){
    min-width: @w;
}
.mih(@h){
    min-height: @h;
}
//高度100%
.h100(){
  height: 100%;
}
.w100(){
    width: 100%;
}
//布局
.bc(){
  margin-left: auto;
  margin-right: auto;
}
.mt(@m){
    margin-top: @m;
}
.ml(@m){
    margin-left:@m;
}
.mr(@m){
    margin-right: @m;
}
.mb(@m){
    margin-bottom: @m;
}
.pt(@m){
    padding-top: @m;
}
.pl(@m){
    padding-left:@m;
}
.pr(@m){
    padding-right: @m;
}
.pb(@m){
    padding-bottom: @m;
}
.m(@a,@b,@c,@d){
    margin: @a @b @c @d;
}
.p(@a,@b,@c,@d){
    padding: @a @b @c @d;
}
.pd(@x,@y){
    padding: @x @y;
}
.mg(@x,@y){
    margin: @x @y;
}
//3、文字属性
.font-s(@p){
  font-size: @p;
}
.col(@color) {
  color: @color;
}
.whiteColor(@opacity) {
    color: rgba(255, 255, 255, @opacity);
}
.blackColor(@opacity) {
    color: rgba(0, 0, 0, @opacity);
}
//透明度
.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}
.txt-ver(@h){
  height: @h;
  line-height: @h;
}
.font-wn(){
  font-weight: normal;
}
.font-wb(){
  font-weight: bold;
}
.font-fm(){
  font-family: "Microsoft Yahei","微软雅黑";
}
//鼠标手指
.cp{
    cursor: pointer;
}
//补充border属性
.border(@w,@color){
    border: @w solid @color;
}
.border-t(@w,@color){
    border-top: @w solid @color;
}
.border-b(@w,@color){
    border-bottom: @w solid @color;
}
.border-r(@w){
    border-radius: @w;
}
.border-c(@a,@b,@c,@d){
    border-color: rgba(@a,@b,@c,@d);
}
.ti(@a){
    text-indent:@a;
}
.clearfix() {
  *zoom: 1;
  &:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
  }
}
//text
.text-n(@p: none){
  text-decoration: @p;
}
//添加下划线
.tu(){
  text-decoration: underline;
}
.tn(){
  text-decoration: none;
}
.tl(){
  text-align: left;
}
.tc(){
  text-align: center;
}
.tr(){
  text-align: right;
}
//垂直居中
.vam(){
    vertical-align: middle;
}

.bs-box(){
    box-sizing: border-box;
}
.ovf-h(){
    overflow: hidden;
}
.ovf-xh(){
    overflow-x: hidden;
}
.ovf-yh(){
    overflow-y: hidden;
}
.ovf-a(){
    overflow: auto;
}
.ovf-xa(){
    overflow-x: auto;
}
.ovf-ya(){
    overflow-y: auto;
}

//文字省略号(不兼容火狐)
// @substract单位为%
.ellipsis-basic(){
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  .font-fa();
}
.ellipsis(@substract:0) {
  .ellipsis-basic();
  width:100% - @substract;
}
//兼容性写法
.text-over(@h) {
    display: block;
    //  width: 100px;
    position: relative;
    line-height: @h;
    max-height: 3*@h; //数字代表几倍行高就是显示几行
    overflow: hidden;
    ::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding-left: 40px;//距离省略号左边
        background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.55, #fff));
        background: -webkit-linear-gradient(left, transparent, #fff 55%);
        background: -moz-linear-gradient(left, transparent, #fff 55%);
        background: -o-linear-gradient(left, transparent, #fff 55%);
        background: linear-gradient(left, transparent, #fff 55%);
    }
}
.ellipsis-text{
    .rel();
    .h(60px);
    .lh(20px);
    overflow: hidden;
    ::after{
        content:"...";
        font-weight:bold;
        .abs();
        .b(0);
        .r(0);
        .p(0,20px,1px,45px);
    }
}



//4、背景属性
.whiteBgColor(@opacity) {
    background-color: rgba(255, 255, 255, @opacity);
}
.blackBgColor(@opacity){
    background-color: rgba(0, 0, 0, @opacity);
}
@borderColor: hsla(0, 0%, 100%, .2);
//background
.bkg(@bkg){
    background-color: @bkg;
}
.bkg-c(@a,@b,@c,@d){
    background-color: rgba(@a,@b,@c,@d);
}
.bg(@url)
{
  background: url(@url) 0 0 repeat;
}
.bg-m(@url,@x:0,@y:0,@repeat:no-repeat)
{
  background: url(@url) @x @y @repeat;
}
.bg-m-c(@url,@x,@y,@repeat:no-repeat, @color)
{
  background: url(@url) @x @y @repeat @color;
}
.bg-m-l(@url,@x:19px,@y:4px,@repeat:no-repeat)
{
  background: url(@url) @x @y @repeat;
}
.bgi(@url)
{
  background-image: url(@url);
}
.bgp(@x:0,@y:0){
  background-position: @x @y;
}
.bgr-r(){
  background-repeat: repeat;
}
.bgr-x(){
  background-repeat: repeat-x;
}
.bgr-y(){
  background-repeat: repeat-y;
}
.bgr-no(){
  background-repeat: no-repeat;
}
.bga-fix(){
  background-attachment: fixed;
}
//背景图片整合
.bg_img(@w,@h,@url,@x,@y){
    .db();
    .w(@w);
    .h(@h);
    .bg-m(@url);
    .bgp(@x,@y);
}
